<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/loading.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/icons-extra.css" />
		<link rel="stylesheet" href="../css/aside-nav.css" />
		<link rel="stylesheet" href="../css/home-list-zx.css" />
		<style type="text/css">
			[v-cloak] {
				display: none !important;
			}
			/*.mui-table-view-cell:after {
				height: 0;
			}*/
			
			.mui-table-view-cellnodata:after {
				height: 0;
			}
			
			.mui-slider-title {
				color: #fff;
				background-color: rgba(0, 0, 0, 0.4);
			}
			/*.mui-slider {
				width: 360px;
			}*/
		</style>
	</head>

	<body>
		<div id="Loading">
			<div class="loader-inner ball-beat">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div id="pullrefresh">
			<!--悬浮按钮操作-->
			<div class="aside-nav" id="aside-nav">
				<label for="" class="aside-menu" id="aside-menu" @click="switchMenu">	
					<!--<span class="mui-icon iconfont" v-bind:class="asideinfo.show ? 'icon-guanbi':'icon-caidan'"></span>-->
				<span class="mui-icon" v-bind:class="asideinfo.show ? 'mui-icon-closeempty':'iconfont icon-caidan'"></span>
				</label>
				<div class="menu-item menu-first" id="menu-first" @click="switchHome" v-show="asideinfo.show">
					<span class="mui-icon iconfont icon-shouye"></span><label>返回首页</label>
				</div>
				<div v-if="asideinfo.children.menuSecond.flag == true" class="menu-item menu-second" id="menu-second" @click="switchBranch" v-show="asideinfo.show">
					<span class="mui-icon iconfont icon-zhibuhuodong"></span><label>本支部</label>
				</div>
				<div v-else class="menu-item menu-second" id="menu-second" @click="switchBranch" v-show="asideinfo.show">
					<span class="mui-icon iconfont icon-zuzhishenghuo"></span><label>全组织</label>
				</div>
			</div>
			<div class="mui-content" style="padding-top: 40px;">
				<div class="mui-navbar-inner mui-bar mui-bar-nav">
					<a class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav" style="width: 45px;"></span>
					</a>
					<h1 class="mui-title"></h1>
				</div>
				<!--滚动轮播-->
				<div id="slider" class="mui-slider">
					<!--<div class="mui-slider-group">
						<div id="slider1" class="mui-slider">
							<div class="mui-slider-item">
								<a href="#">
									<img src="../images/32noimg.png">
								</a>
							</div>
						</div>
					</div>-->
				</div>
				<!--列表内容-->
				<div id="content" class="mui-control-content mui-active" v-cloak>
					<ul class="mui-table-view">
						<li class="mui-table-view-cell mui-table-view-cellnodata" v-show="nums == 0">
							<div class="mui-media-body" style="text-align: center;font-size: 14px; color: #9999b0;">
								暂无数据....
							</div>
						</li>
						<li class="mui-table-view-cell mui-media" v-for="item in items">
							<a href="javascript:;" @click="showDetail(item.id,navTitle)">
								<!--<img class="mui-media-object mui-pull-left" style="border-radius: 2px;" onerror="this.src='../images/32noimg.png'" v-bind:src="item.image">-->
								<img class="mui-media-object mui-pull-left lazy" style="border-radius: 2px;" v-lazy="item.image">
								<div class="mui-media-body">
									<div class="listzx" style="font-size: 16px;text-overflow: ellipsis; overflow:hidden; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{item.title}}</div>
									<p class="mui-ellipsis">{{item.creationTime}}</p>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--滚动轮播模板-->
		<script id="sliderTmpl" type="text/html">
			<div class="mui-slider-group">
				{{each items as value index}}
				<div class="mui-slider-item">
					<!--<a href="javascript:;" onclick="javascript:showDetail({{value.id}},'')">-->
					<a href="javascript:;" data-id="{{value.id}}">
						{{if value.image!=''&&value.image!=null}}
						<img src='{{value.image}}' /> {{else}}
						<img src='../images/32noimg.png' /> {{/if}}
						<p class="mui-slider-title">{{value.title}}</p>
					</a>
					<!--</a>-->
				</div>
				{{/each}}
			</div>
		</script>
	</body>

</html>
<script type="text/javascript" src="../js/mui.min.js"></script>
<script type="text/javascript" src="../js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../js/vue-lazyload.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/template.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script type="text/javascript" src="../js/localStorage.js"></script>
<script type="text/javascript" src="../js/organization.js"></script>
<script type="text/javascript">
	Vue.use(VueLazyload, {
		error: '../images/32noimg.png', // 错误加载展示
		loading: '../images/32noimg.png', //	加载中展示
		preLoad: 1,
		attempt: 1

	});
	var listvm;
	var asidevm;
	var pinfoName; //当前栏目名称
	var columid; //栏目id
	var offset = 0; // 当前页码
	var limit = 10; //显示条数
	var total; //总数
	var isflag = true; //默认有分页数据
	var waiting; //加载动画	// 快捷导航组织信息
	var asideinfo = localStorageFunc.get("asideinfo") || localStorageFunc.set('asideinfo', asidenavigation);

	//	mui初始化事件
	mui.init({
		swipeBack: true, //启用右滑关闭功能
		beforeback: function() { //初始化返回事件
			refreshParent();
			return true;
		},
		pullRefresh: {
			container: '#pullrefresh',
			up: {
				height: '50px',
				auto: false,
				contentrefresh: '正在加载.....',
				contentmore: '暂无更多数据',
				callback: pulluprefresh
			},
			down: {
				style: 'circle',
				height: 50, //可选,默认50.触发下拉刷新拖动距离,
				style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
				color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
				range: '100px', //可选 默认100px,控件可下拉拖拽的范围
				offset: '0px', //可选 默认0px,下拉刷新控件的起始位置				
				callback: pulldownRefresh
			}
		}
	});

	mui.plusReady(function() {

		pinfoName = plus.webview.currentWebview().pinfo.name;
		var pageid = plus.webview.currentWebview().id;
		columid = plus.webview.currentWebview().columid;
		$(".mui-title").text(pinfoName);
		if(asideinfo.show) {
			asideinfo.show = false;
			localStorageFunc.set('asideinfo', asideinfo);
		}

		listvm = new Vue({
			el: "#content",
			data: {
				items: null,
				nums: 1,
				navTitle: pinfoName
			},
			methods: {
				showDetail: function(detailid, columname) {
					if(asideinfo.show) {
						asideinfo.show = false;
						localStorageFunc.set('asideinfo', asideinfo);
					}
					var titleNView = {
						backgroundColor: '#e51c23', //导航栏背景色
						titleText: columname, //导航栏标题
						titleColor: '#fff', //文字颜色
						type: 'transparent', //透明渐变样式
						autoBackButton: true, //自动绘制返回箭头
						splitLine: { //底部分割线
							color: '#fff'
						}
					}
					mui.openWindow({
						url: '/html/home-detail.html',
						id: 'home-detail',
						createNew: false,
						extras: {
							'detailid': detailid,
							'columname': columname
						},
						/*styles: {
							titleNView: titleNView
						},*/
						show: {
							autoShow: true,
							aniShow: 'slide-in-right',
							duration: 300
						},
						waiting: {
							autoShow: false,
							title: '正在加载...'
						}
					});

				}
			},
			/*mounted: function() {
				document.body.removeChild(document.getElementById('Loading'));
			}*/
		});

		//	初始化渲染快捷导航
		asidevm = new Vue({
			el: "#aside-nav",
			data: asideinfo,
			methods: {
				//	快捷菜单切换
				switchMenu: function() {
					this.show = !this.show;
					localStorageFunc.set('asideinfo', asideinfo);
				},
				//	返回到主页
				switchHome: function() {
					this.show = false;
					if(pageid == '/html/sub-home.html') {
						return;
					}
					localStorageFunc.set('asideinfo', asideinfo);

					refreshParent();

					mui.back();
				},
				// 支部和组织切换
				switchBranch: function() {
					isflag = true; //解决切换支部和组织后数据无效bug 
					listvm.items = null;
					waiting = plus.nativeUI.showWaiting("数据加载中...");
					offset = 0; // 当前页码
					limit = 5; //显示条数
					this.children.menuSecond.flag = !this.children.menuSecond.flag;
					this.show = !this.show;
					//更新缓存数据
					localStorageFunc.set('asideinfo', asideinfo);
					setTimeout(function() {
						pulluprefresh();
						setTimeout(function() {
							waiting.close();
						}, 800);
					}, 800)
				}
			}
		})

		initData(columid, pinfoName);

	});

	function initSlider() {
		var gallery = mui("#slider");
		gallery.slider({
			interval: 3000
		});
	};

	function renderCms(result) {
		var strDom = template('sliderTmpl', {
			items: result
		});
		mui('#slider')[0].innerHTML = strDom;
		initSlider();
	}

	//	更新点击推荐图多次点击无效bug
	mui('body').on('tap', '#slider .mui-slider-item a', function() {
		var dataid = this.getAttribute('data-id');
		showDetail(dataid, '');

	});

	//	查看详情
	function showDetail(detailid, columname) {
		if(asideinfo.show) {
			asideinfo.show = false;
			localStorageFunc.set('asideinfo', asideinfo);
		}
		mui.openWindow({
			url: '/html/home-detail.html',
			id: 'home-detail',
			createNew: false,
			extras: {
				'detailid': detailid,
				'columname': columname
			},
			show: {
				autoShow: true,
				aniShow: 'slide-in-right',
				duration: 300
			},
			waiting: {
				autoShow: false,
				title: '正在加载...'
			}
		})
	}

	//	初始化数据加载、渲染DOM、刷新加载以及分页
	function initData(columid, name) {
		var bool = asidevm.children.menuSecond.flag ? true : false;
		/*console.log('bool:' + bool);
		console.log('offset:' + offset);
		console.log('limit:' + limit);*/

		//关闭等待框
		plus.nativeUI.closeWaiting();

		//显示当前页面
		ctdj.cms.getList(columid, bool, offset, limit, function(r) {
			if(r.success) {

				$.each(r.result.pagedArticles.items, function(index, item) {
					if(item.image != '') { //设置相对路径
						item.image = ctdj.tools.handelImageFullUrl(item.image);
						//item.creationTime =  item.creationTime.split('.')[0].replace('T', ' ');
					}
					item.creationTime = item.creationTime.split('T')[0];
				});

				$.each(r.result.topArticles, function(index, item) {
					if(item.image != '') { //设置相对路径
						item.image = ctdj.tools.handelImageFullUrl(item.image);
					}
				});

				renderCms(r.result.topArticles);
				listvm.items = r.result.pagedArticles.items;
				listvm.nums = r.result.pagedArticles.items.length == 0 ? 0 : r.result.pagedArticles.items.length;

				total = r.result.pagedArticles.totalCount;
				isflag = total > limit ? true : false; // 判断总条数 与当前页显示条数+5 

				setTimeout(function() {
					if(listvm.items.length > 0) {
						$.each($("#content .listzx"), function(index, item) {
							if($(item).height() <= 30) {
								$(item).css('line-height', '45px');
							} else {
								$(item).css('line-height', '20px');
							}
						})
					}
				}, 300);
			} else {
				listvm.items = null;
				isflag = false;
			}

			if($("#Loading").length > 0) {
				document.body.removeChild(document.getElementById('Loading'));
			}

		});

	}

	//	分页查询
	function pulluprefresh() {
		if(isflag) { //初始化isflag 为true,有分页
			isflag = total > limit + 10 ? true : false; // 判断总条数 与当前页显示条数+5 
			limit += 10;
			initData(columid, name);
			setTimeout(function() {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh();
			}, 1000);

		} else {
			setTimeout(function() {
				mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
			}, 1000);
		}

	}

	//	刷新操作
	function pulldownRefresh() {
		setTimeout(function() {
			initData(columid, name);
			mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
		}, 500);
	};

	//	重置父页面快捷导航
	function refreshParent() {
		if(asideinfo.show) {
			asideinfo.show = false;
			localStorageFunc.set('asideinfo', asideinfo);
		}
		var subhomePage = plus.webview.getWebviewById('/html/sub-home.html');
		if(subhomePage) {
			mui.fire(subhomePage, 'updateNavbar');
		}
	}
</script>